<template>
  <div class="adminStation" ref="warpper">
    <div>
      <div class="card-contant">
        <div class="name-contant">
          <div class="name">{{info.title}}</div>
        </div>
        <div class="no-contant">
          <div class="no">NO.{{info.d_code}}</div>
          <div class="time">{{info.time}}</div>
        </div>
        <div class="address-contant">
          <div class="left">
            <div class="address">
              <i class="iconfont icon-dizhi"></i>
              {{info.address}}
            </div>
            <div class="distance">
              <i class="iconfont icon-juli"></i>
              {{info.distance}}KM
            </div>
          </div>
          <div class="right">
            <div class="item" @click="lead()">
              <i class="iconfont icon-daohang"></i>
              <div class="text">导航</div>
            </div>
          </div>
        </div>
      </div>
      <div class="setting">
        <div class="setting_left">
          <div class="title">设置维护状态</div>
          <div class="little_title">维护状态下该设备不能继续充电使用</div>
        </div>
      </div>
      <div class="list_view">
        <div class="title_view">
          <div class="title">所有充电插头</div>
          <div class="right">
            <div class="item">
              <span class="status">闲</span>
              <span>{{info.free_num}}</span>
            </div>
            <div class="item">
              <span class="status" style="background:#FFA800">充</span>
              <span>1</span>
            </div>
          </div>
        </div>
        <div>
          <charing :data="item" v-for="(item,index) in info.sockets" :key="index"></charing>
        </div>
      </div>
      <div class="bottom-contant" @click="jumpTo('Record')">
        <div class="record">查看充电记录</div>
      </div>
      <div class="bottom-space"></div>
      <!-- 弹窗 -->
      <!-- <div class="dialog_mask ">
      <div class="dialog_main">
        <div class="title">设置维护状态</div>
        <div class="content">维护状态下该设备不能继续充电使用</div>
        <div class="btn_view">
          <div class="btn confirm">确认</div>
          <div class="btn cancel">取消</div>
        </div>
      </div>
      </div>-->
    </div>
  </div>
</template>
   
<style lang="less" scoped>
@import "index.less";
</style>

<script>
import charing from "../../../components/charing/index";
import BScroll from "better-scroll";
import wx from "weixin-js-sdk";
import { mapState } from "vuex";
export default {
  name: "adminStation",
  data() {
    return {
      charging_icon1: require("../../../assets/images/charging_icon1.png"),
      charging_icon2: require("../../../assets/images/charging_icon2.png"),
      id: "",
      // 后台信息
      info: {}
    };
  },
  created() {
    this.id = this.$route.query.id;
    this.getlist();
    console.log(this.loc);
  },
  computed: {
    ...mapState({
      loc: state => state.Station.loc
    })
  },
  methods: {
    getlist() {
      const that = this;
      that.$dialog.loading.open("正在加载");
      that.$http
        .get("/device/Chargeinfo", {
          params: {
            id: that.id,
            lng: that.loc.longitude,
            lat: that.loc.latitude
          }
        })
        .then(res => {
          console.log(res.data.data);
          that.info = res.data.data;
          that.$forceUpdate();
          that.scrollInit();
          that.$dialog.loading.close();
        });
    },
    scrollInit() {
      new BScroll(this.$refs.warpper, {
        click: true
      });
    },
    jumpTo(path) {
      this.$router.push({
        path: `/${path}`
      });
    },
    // 地理位置导航
    lead() {
      const that = this;
      wx.openLocation({
        latitude: that.info.lat, // 纬度，浮点数，范围为90 ~ -90
        longitude: that.info.lng, // 经度，浮点数，范围为180 ~ -180。
        name: that.info.title, // 位置名
        address: that.info.address, // 地址详情说明
        scale: 14 // 地图缩放级别,整形值,范围从1~28。默认为最大
      });
    },
    // p配置
    WXconfig() {
      const that = this;
      this.$dialog.loading.open("正在加载");
      this.$http
        .get("/wechat_jssdk", {
          params: {
            url: window.location.href
          }
        })
        .then(res => {
          const result = res.data.data;
          wx.config({
            debug: true,
            appId: result.appId, // 和获取Ticke的必须一样------必填，公众号的唯一标识
            timestamp: result.timestamp, // 必填，生成签名的时间戳
            nonceStr: result.nonceStr, // 必填，生成签名的随机串
            signature: result.signature, // 必填，签名，见附录1
            //需要分享的列表项:发送给朋友，分享到朋友圈，分享到QQ，分享到QQ空间
            jsApiList: [
              "checkJsApi",
              "startRecord",
              "stopRecord",
              "translateVoice",
              "scanQRCode",
              "openCard",
              "updateAppMessageShareData",
              "getLocation",
              "openLocation"
            ]
          });
          wx.ready(() => {
            that.getlist();
          });
        });
    }
  },
  components: {
    charing
  }
};
</script>
